<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <link rel="stylesheet" th:href="@{/css/common.css}" />
    <link rel="stylesheet" th:href="@{/css/index.css}" />
    <title>首页</title>
    <style>
        #container{width:900px;height:400px;overflow:hidden;position:relative;margin:0 auto;}
        #list{width:1000%;height:400px;position:absolute;z-index:1;}
        #list img{float:left;}
        #buttons{position:absolute;width:100px;height:10px;bottom:20px;left:250px;z-index:2;}
        #buttons span{cursor:pointer;display:block;float:left;width:10px;height:10px;border:1px solid #FFF;border-radius:50%;background:#333;margin-right:5px;}
        #buttons .on {  background: orange;}
        .arrow{position:absolute;display:none;width:40px;height:40px;line-height:40px;z-index:2;font-size:36px;text-align:center;font-weight:bold;top:180px;background-color:rgba(0,0,0,.3);color:#FFF;}

        #prev{left:20px;}
        #next{right:20px;}
        #container:hover .arrow{display:block;}
        .arrow:hover{background-color:rgba(0,0,0,.7);}
        .news:hover{
         background: #e6eaee;
        }
    </style>
    <script>
        window.onload=function(){
            var container=document.getElementById('container');
            var list=document.getElementById('list');
            var buttons = document.getElementById('buttons').getElementsByTagName('span');
            var prev = document.getElementById('prev');
            var next = document.getElementById('next');
            var index=1;
            var animated=false;
            var timer;

            function showBtn(){
                for(var i=0;i<buttons.length;i++){

                    if(buttons[i].className=='on'){
                        buttons[i].className='';
                    }
                }
                buttons[index-1].className='on';
            }

            function animate(offset){
                animated=true;
                var newL=parseInt(list.style.left)+offset;
                var time=700;
                var interval=10;
                var speed = offset/(time/interval);

                function go(){
                    if((speed<0 && parseInt(list.style.left)>newL) || (speed>0 && parseInt(list.style.left)< newL)){
                        list.style.left=parseInt(list.style.left)+speed+'px';
                        setTimeout(go,interval);
                    }else{
                        animated=false;
                        list.style.left = newL+'px';
                        if(newL<-3000){
                            list.style.left=-900+'px';
                        }else if(newL>-900){
                            list.style.left=-3000+'px';
                        }
                    }
                }
                go();
            }

            function play(){
                timer = setInterval(function(){
                    next.onclick();
                },3000);
            }

            function stop(){
                clearInterval(timer);
            }

            next.onclick=function (){
                if(index==5){
                    index=1;
                }else{
                    index+=1;
                }

                if(animated==false){
                    animate(-900);
                }
                showBtn();
            }

            prev.onclick=function (){
                if(index==1){
                    index=5;
                }else{
                    index-=1;
                }

                if(animated==false){
                    animate(900);
                }
                showBtn();
            }

            for(var i=0;i<buttons.length;i++){
                buttons[i].onclick=function (){
                    var myindex = parseInt(this.getAttribute('index'));
                    var offset = -700*(myindex-index);
                    if(animated==false){
                        animate(offset);
                    }
                    index=myindex;
                    showBtn();
                }
            }

            container.onmouseover=stop;
            container.onmouseout=play;
            play();

        }
    </script>
</head>
<body>
    <!--黑色半透明背景-->
    <div class="blackLucency"></div>

    <!--头部-->
    <div th:include="~{/client/common/header :: header}">

    </div>
            <div style="width: 100%;height: 400px;background-color: #198CFF">
                <!--banner轮播图-->
                <div id="container">
                    <div id="list" style="left:0px">
                    </div>
                    <div id="buttons">
                    </div>
                    <a href="#" id="prev" class="arrow"><</a>
                    <a href="#" id="next" class="arrow">></a>
                </div>
            </div>
          <!--跑马灯位置-->
            <div style="height: 50px;">
                <h3 style="font-weight: bold;">活动赛况</h3>
                 <marquee><span id="textids"></span></marquee>
            </div>
            <!--新闻信息页-->
            <div  style="float: left; width: 70%;border: 1px solid #e6eaee;" id="newsIds"></div>
             <!--活动日程--->
            <div style="float: right; width: 29.5%;height: 400px; text-align: left" id="schedule"></div>
            <div style="float: right; width: 29.5%;height: 400px; text-align: left;margin-top: 20px" id="ranking"></div>
    <script th:src="@{/js/jquery.min.js}" ></script>
    <script th:src="@{/js/banner.js}" ></script>
    <script th:src="@{/js/activityOuts.js}" ></script>
    <script th:src="@{/js/news.js}" ></script>
    <script th:src="@{/js/activitySchedule.js}" ></script>
    <script th:src="@{/js/ranking.js}" ></script>
</body>
</html>
